<template>
    <div class="goods-detail-content">
      <div class="detail-left">
        <el-image
          :src=form.picture
        />
      </div>
      <div class="detail-right">
        <el-descriptions :column="1" border ref="formRef">
          <el-descriptions-item label="商品名称">
            {{ form?.name }}
          </el-descriptions-item>
          <el-descriptions-item label="商品描述">
            {{ form?.description }}
          </el-descriptions-item>
          <el-descriptions-item label="商品价格" v-if="currentid.isnew">
            <span class="price">¥{{ form?.price *0.8 }}</span>
            <span class="old-price">¥{{ form?.price }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="商品价格" v-else>
            <span class="price">¥{{ form?.price }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="商品库存">
            {{ form?.stock }}
          </el-descriptions-item>
          <el-descriptions-item label="数量">
            <el-input-number v-model="count" :min="1" :max=(form.stock?form.stock:10) @change="handleChange" />
          </el-descriptions-item>
          <el-descriptions-item label="总价" v-if="currentid.isnew">
            <span class="total-price">¥{{ (form?.price *0.8 *count).toFixed(2) }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="总价" v-else>
            <span class="total-price">¥{{ (form?.price * count).toFixed(2) }}</span>
          </el-descriptions-item>
        </el-descriptions>

        <div class="action-buttons">
          <el-button 
            type="primary" 
            plain 
            size="large"
            @click="handleAddCart"
          >
            <el-icon><ShoppingCart /></el-icon>
            加入购物车
          </el-button>
          <el-button 
            type="primary" 
            size="large"
            @click="handleBuyNow"
          >
            立即购买
          </el-button>
        </div>
      </div>
    </div>

</template>
<script setup>
import { computed, ref ,onMounted,reactive} from 'vue'
import { ElMessage } from 'element-plus'
import  useCartStore  from '@/stores/cartStore'
import { getGoods} from '../../../api'

const props = defineProps({
  show: Boolean,
  currentid:{
    type: Object,
  }
})
const count = ref(1)
onMounted(() => {
  loadGoods();
})
const form = reactive({
  id: props.currentid.id,
  name: '',
  category_id: '',
  price: '',
  picture: '',
  stock: '',
  spec: '',
  description: ''
})
const formRef = ref()
const loadGoods = async() => {
  if (form.id) {
    const goods = await getGoods({ id: form.id })
    Object.assign(form, goods)
  }
}
const resetForm = id => {
  form.id = id
  btnCancel()
}
const btnCancel = () => {
  form.name= '',
  form.category_id= '',
  form.price='',
  form.picture= '',
  form.stock= '',
  form.spec='',
  form.description= ''
  form.picture = ''
  count.value=1
  loadGoods()
}
defineExpose({ resetForm })
const emit = defineEmits(['update:show'])

const dialogVisible = computed({
  get: () => props.show,
  set: (value) => emit('update:show', value)
})


const cartStore = useCartStore()

const handleAddCart = () => {
  const buyGoods = {
    id: form.id,
    name: form.name,
    picture: form.picture,
    price: form.price || props.goods.retail_price,
    count: count.value,
    desc: form.description,
    selected: true
  }
  
  cartStore.addToCart(buyGoods)
  ElMessage.success('已加入购物车')
  dialogVisible.value = false
}



const handleBuyNow = () => {
  ElMessage.error('余额不足，请先充值...')
  dialogVisible.value = false
  
}
</script>



<style scoped lang="scss">
.goods-detail-content {
  display: flex;
  gap: 30px;
  padding: 20px 0;

  .detail-left {
    width: 350px;
    
    :deep(.el-image) {
      width: 100%;
      height: 350px;
      border-radius: 8px;
      overflow: hidden;
    }
  }

  .detail-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;

    .price {
      color: $priceColor;
      font-size: 20px;
      font-weight: bold;
    }

    .old-price {
      color: #999;
      font-size: 14px;
      text-decoration: line-through;
      margin-left: 10px;
    }
  }
}

.action-buttons {
  margin-top: 20px;
  display: flex;
  gap: 20px;

  :deep(.el-button) {
    flex: 1;
  }
}
</style> 